// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
import { h, render } from 'vue'
import XtxMessage from './xtx-message.vue'
export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    const ctx = require.context('./', false, /\.vue$/)
    ctx.keys().forEach(item => {
      const component = ctx(item).default
      app.component(component.name, component)
    })

    // 定义指令
    app.directive('lazy', {
      mounted (el, { value }) {
        const observer = new IntersectionObserver(([{ isIntersecting }], observer) => {
          if (isIntersecting) {
            observer.unobserve(el)
            el.src = value

            el.onerror = function () {
              el.src = require('@/assets/images/200.png')
            }
          }
        }, { threshold: 0 })
        observer.observe(el)
      }
    })
  }
}

// 封装一个弹窗调用message组件函数
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
let timer = null
export function Message ({ type, text }) {
  const vNode = h(XtxMessage, { type, text })
  render(vNode, div)
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}
